<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
	<jsp:include page="../../views/include/head.jsp"/>
</head>
<body>
<c:set var="page" value="registration" scope="request"/>
<jsp:include page="../../views/include/header.jsp"/>
<div class="row">
<div class="maincontainer">
<div class="container2">
	<div class="row">
	<h2 style="color:#D71A5E; padding-left:15px;">Learning Journeys Registration</h2>
	</div>
	<img style="width: 770px;" src="img/personal-details2.png">
	<sf:form modelAttribute="registerObj" role="form">
	<div class="container3" style="background-color: #88a273;">
	<div class="row">
		<div class="form-group col-md-4 col-sm-4">
			<label for="salutation">Salutation</label>
			<sf:select path="salutation" cssClass="selectpicker form-control">
				<sf:option value="">--Select--</sf:option>
				<sf:option value="Mr">Mr</sf:option>
				<sf:option value="Ms">Ms</sf:option>
				<sf:option value="Mrs">Mrs</sf:option>
				<sf:option value="Dr">Dr</sf:option>
				<sf:option value="Prof">Prof</sf:option>
			</sf:select>
			<sf:errors path="salutation" cssClass="error"/>
		</div>
		<div class="form-group col-md-8 col-sm-8">
			<label for="name">Full Name</label>
			<sf:input path="name" placeholder="Enter Full Name" class="form-control" type="text" required="true"/>
			<sf:errors path="name" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-4 col-sm-4">
			<label for="nric">NRIC No</label>
			<sf:input path="nric" placeholder="Enter NRIC" class="form-control" type="text" required="true"/>
			<sf:errors path="nric" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-6 col-sm-6">
			<label for="designation">Job Title / Designation</label>
			<sf:input path="designation" placeholder="Enter Designation" class="form-control" type="text" required="true"/>
			<sf:errors path="designation" cssClass="error"/>
		</div>
		<div class="form-group col-md-6 col-sm-6">
			<label for="company">Preschool / Organization</label>
			<sf:input path="company" placeholder="Enter Preschool / Organization" class="form-control" type="text" required="true"/>
			<sf:errors path="company" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-6 col-sm-6">
			<label for="mobile">Mobile Number (For SMS Notification)</label>
			<sf:input path="mobile" placeholder="Enter Mobile Number" class="form-control" type="tel" maxlength="8" required="true"/>
			<sf:errors path="mobile" cssClass="error"/>
		</div>
		<div class="form-group col-md-6 col-sm-6">
			<label for="officeNo">Office Number</label>
			<sf:input path="officeNo" placeholder="Enter Office Number" class="form-control" type="tel" maxlength="8"/>
			<sf:errors path="officeNo" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-8 col-sm-8">
			<label for="email">Email Address</label>
			<sf:input path="email" placeholder="Enter Email" class="form-control" type="email" required="true"/>
			<sf:errors path="email" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-8 col-sm-8">
			<label for="address">Mailing Address</label>
			<sf:input path="address" placeholder="Enter Mailing Address" class="form-control" type="text" required="true"/>
			<sf:errors path="address" cssClass="error"/>
		</div>
		<div class="form-group col-md-4 col-sm-4">
			<label for="postalCode">Postal Code</label>
			<sf:input path="postalCode" placeholder="Postal Code" class="form-control" type="text" maxlength="6" required="true"/>
			<sf:errors path="postalCode" cssClass="error"/>
		</div>
	</div>
	</div>
	<div class="row">
	</div>
	<br><br>
	<div class="container4">
	<div class="row">
		<img style="width: 770px;" src="img/choice2.png">
		<sf:errors path="learningJourney" cssClass="error"/>
		<div class="panel-group" id="accordion">
			<c:forEach items="${learningJourneyList}" var="lj" varStatus="ljStatus">
			<div class="panel panel-default" style="background-color:#cbac75;">
				<div class="panel-heading" style="background-color:#a4814a;">
				<h4 class="panel-title">
			        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse${lj.id}">
			          <img src="img/arrow.png">&nbsp; <c:out value="${lj.name}"/> <c:out value="${registerCountObj.learningJourney[lj.id] ge lj.capacity?'[FULL]':''}"/>  <c:out value="${lj.ended?'[CLOSED]':''}"/>
			        </a>
			      </h4>
				</div>
				<div id="collapse${lj.id}" class="panel-collapse collapse">
					<div class="panel-body">
						<div class="radio"><label>
						<sf:radiobutton path="learningJourney" value="${lj.id}" disabled="${registerCountObj.learningJourney[lj.id] ge lj.capacity or lj.ended}"/> 
						<fmt:formatNumber value="${lj.cost}" type="currency" currencySymbol="$"/><br/>
						<fmt:formatDate value="${lj.journeyDate}" dateStyle="long"/>
						<!-- 20131107 ${lj.closingDate} ended: ${lj.ended} -->
						<c:out value="${lj.duration}"/><br/>
						Venue: <c:out value="${lj.venue}"/> 
						</label></div>
						Click <a href="learningjourney.rw#${lj.id}" target="_blank">here</a> for more details
						<!-- used: ${registerCountObj.learningJourney[lj.id]} vs capacity: ${lj.capacity} for id ${lj.id}-->
					</div>
				</div>
			</div>
			</c:forEach>
		</div>
	</div>
	</div>
	<br>
	<div class="row" style="color:black; padding-left:450px;">
		<input type="reset" value="Reset" class="btn btn-lg btn-default2"/>
		<input type="submit" name="_eventId_next" value="Proceed to Payment" class="btn btn-lg btn-default2"/>
		<input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}" />
	</div>

	</sf:form>
						<br><br>

</div>
</div>
</div> <!-- /container -->
</div>
<jsp:include page="../../views/include/bottombody.jsp"/>
</body>
</html>